<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app"></div>

  <script src="../js/vue.js"></script>
  <script>
     // 1.创建Vue的实例对象
     const app = Vue.createApp({

       setup(props,context) {
         const message = 'this is message';
         const logMessage = ()=>{
           console.log(message);
         };
         return {
           message,
           logMessage
         }
       },

       // 我们在其他属性里面应用 setup() 函数里面的东西
       template: `
          <h1>{{message}}</h1>
          <button @click="logMessage">点击触发</button>
       `

     });

     app.mount('#app');
  </script>

</body>
</html>








































